<!DOCTYPE html>
<title>Overflow menu should be the last media controls button visible.</title>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<script src="media-controls.js"></script>
<script src="overflow-menu.js"></script>

<!--Padding ensures the overflow menu is visible for the tests. -->
<body style="padding-top: 200px; padding-left: 100px">
<video controls style="width: 24px"></video>
<audio controls style="width: 24px"></audio>
<script>
async_test(function(t) {
   // Set up video
  var video = document.querySelector("video");
  video.src = "content/test.ogv";

  var audio = document.querySelector("audio");
  audio.src = "content/test.oga";

  video.onloadeddata = t.step_func_done(function() {
    var overflowVideo = getOverflowMenuButton(video);
    var overflowAudio = getOverflowMenuButton(audio);

    // Overflow menu button should be visible
    assert_not_equals(getComputedStyle(overflowVideo).display, "none");
    assert_not_equals(getComputedStyle(overflowAudio).display, "none");
  });
});
</script>
</body>

